<template>
	<div>
		<SearchForm
			@reset="reset"
			@search="search"
			ref="search"
			:form="queryParams">
			<FormItem
				v-for="item in SearchFormItems"
				:FormItem="item"
				@FormItem="val => (item = val)"
				v-model="queryParams"></FormItem>
		</SearchForm>

		<div class="tablePage" v-loading="loading">
			<div class="card-wrap card-padding">
				<div class="table-title-wrap justify-end">
					<el-button
						type="primary"
						icon="el-icon-plus"
						size="mini"
						v-hasPermi="['quota:forecast:list:add']"
						@click="
							_toPage({
								path: '/quota/ForecastEdit',
								name: 'ForecastEdit',
							})
						">
						新增
					</el-button>
				</div>

				<el-table
					:data="datalist"
					style="width: 100%"
					:row-class-name="getRowClass">
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-table
								:data="props.row.calcSchemeDetailList"
								style="width: 100%"
								v-if="
									props.row.calcSchemeDetailList.length > 0
								">
								<el-table-column
									label="租期"
									prop="planTenancyTypeStr"
									align="center"></el-table-column>
								<el-table-column
									label="支付时间"
									prop="planPaymentMethodTypeStr"
									align="center"></el-table-column>

								<el-table-column
									label="车辆厂商"
									prop="carManufacturer"
									align="center"></el-table-column>
								<el-table-column
									label="车辆品牌"
									prop="carBrandName"
									align="center"></el-table-column>
								<el-table-column
									label="车型"
									prop="carModelName"
									align="center"
									min-width="150">
									<template slot-scope="scope">
										<TooltipDiv
											:content="
												scope.row.carModelName
											"></TooltipDiv>
									</template>
								</el-table-column>
								<el-table-column
									label="车辆类型"
									prop="carTypeStr"
									align="center"></el-table-column>
								<el-table-column
									label="车牌"
									prop="carPlateNo"
									align="center"></el-table-column>
								<el-table-column
									label="车辆来源"
									prop="carSourceTypeStr"
									align="center"></el-table-column>
								<el-table-column
									label="登记性质"
									prop="operationTypeStr"
									align="center"></el-table-column>
								<el-table-column
									label="里程限制（公里）"
									prop="maintenanceAnnualMileageVal"
									align="center"
									min-width="150px"></el-table-column>
								<el-table-column
									label="上牌城市"
									prop="carLicenseCityVal"
									align="center"></el-table-column>
								<el-table-column
									label="保证金"
									prop="planContractCashdeposit"
									align="center"></el-table-column>
								<el-table-column
									label="月租金"
									prop="planRent"
									align="center"></el-table-column>
								<el-table-column
									label="残值"
									prop="planResidualProportion"
									align="center"></el-table-column>
								<el-table-column
									label="车辆指导价"
									prop="carGuidePrice"
									align="center"
									min-width="100px"></el-table-column>
								<el-table-column
									label="车辆销售价"
									prop="purchasePrice"
									align="center"
									min-width="100px"></el-table-column>
								<el-table-column
									label="当期评估价"
									prop="carCurrentAppraisal"
									align="center"
									min-width="100px"></el-table-column>
								<el-table-column
									label="项目IRR"
									prop="planPricingIrr"
									align="center"></el-table-column>
							</el-table>
						</template>
					</el-table-column>
					<el-table-column align="center" label="操作" width="190">
						<template slot-scope="scope">
							<div class="handleBox">
								<el-button
									type="text"
									@click="
										_toPage({
											path: '/quota/ForecastDetails',
											name: 'ForecastDetails',
											query: {
												calcSchemeId:
													scope.row.calcSchemeId,
											},
										})
									"
									v-hasPermi="['quota:forecast:list:look']">
									查看
								</el-button>
								<!-- v-if="getBtnType(scope.row)" -->
								<el-button
									type="text"
									@click="
										_toPage({
											path: '/quota/ForecastEdit',
											name: 'ForecastEdit',
											query: {
												calcSchemeId:
													scope.row.calcSchemeId,
											},
										})
									"
									v-hasPermi="['quota:forecast:list:edit']">
									编辑
								</el-button>
								<el-button
									type="text"
									v-if="getBtnType(scope.row)"
									v-hasPermi="['quota:forecast:list:delete']"
									@click="remove(scope.row)">
									删除
								</el-button>
								<el-button
									type="text"
									v-hasPermi="['quota:forecast:list:change']"
									@click="changeToApply(scope.row)">
									转为额度申请
								</el-button>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						label="出租方"
						prop="lessorName"
						min-width="100px"
						align="center"></el-table-column>
					<el-table-column
						label="承租方"
						prop="leaseeName"
						min-width="100px"
						align="center"></el-table-column>
					<el-table-column
						label="额度测算编号"
						prop="calcSchemeCode"
						min-width="100px"
						align="center">
						<template slot-scope="scope">
							{{ scope.row.calcSchemeCode }}
						</template>
					</el-table-column>
					<el-table-column
						label="申请类型"
						prop="applyTypeStr"
						align="center"></el-table-column>
					<el-table-column
						label="方案名称"
						prop="schemeName"
						min-width="100px"
						align="center"></el-table-column>
					<el-table-column
						label="方案状态"
						prop="quotaStatusStr"
						align="center"
						show-overflow-tooltip></el-table-column>
					<el-table-column
						label="合同编号"
						prop="contractTemplateCode"
						align="center">
						<template slot-scope="scope">
							{{ scope.row.contractTemplateCode }}
						</template>
					</el-table-column>
					<el-table-column
						label="合同模板"
						prop="contractTemplateName"
						align="center"></el-table-column>
					<el-table-column
						label="业务来源"
						prop="sourceBusinessTypeStr"
						align="center"></el-table-column>
					<el-table-column
						label="租赁用途"
						prop="useTypeStr"
						align="center"></el-table-column>
					<el-table-column label="项目IRR" prop="irr" align="center">
						<template slot-scope="scope">
							<span>{{ numberRide(scope.row.irr, 100) }}%</span>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination
						layout="total,prev,pager,next,sizes,jumper"
						:background="true"
						:page-sizes="[10, 20, 30, 50]"
						:current-page.sync="queryParams.pageNum"
						:page-size.sync="queryParams.pageSize"
						:total="total"
						@size-change="getList"
						@current-change="getList"
						v-if="total > 0"
						:small="false"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import Cookies from 'js-cookie';
	import * as apis from '@/api/quota/forecast/list/api.js';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	import TableCloumn from '@/views/finance/manage/tableColumn/index.vue';
	export default {
		name: 'Forecast',
		components: { FormItem, TableCloumn },
		dicts: ['expense_business_type'],
		mixins: [],
		props: {},
		data() {
			return {
				loading: false,
				SearchFormItems: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
				},
				datalist: [],
				total: 0,
				dicts: {
					// 合同类型
					contractType: [
						{
							label: '短租',
							value: '1',
						},
						{
							label: '渠道',
							value: '2',
						},
						{
							label: '自营',
							value: '3',
						},
						{
							label: '代收代付',
							value: '4',
						},
					],
					// 提报类型
					applyType: [
						{
							label: '手动提报',
							value: '0',
						},
						{
							label: '自动生成',
							value: '1',
						},
					],
				},
			};
		},
		computed: {
			userId() {
				return Cookies.get('userId');
			},
		},
		watch: {},
		mounted() {
			this.init();
		},
		methods: {
			getBtnType(row) {
				if (row.quotaStatus == '1' || row.quotaStatus == '4') {
					return true;
				} else {
					return false;
				}
			},
			init() {
				this.getList();
				this.initSearch();
			},
			initSearch() {
				let that = this;
				this.SearchFormItems = [
					{
						label: '方案名称:',
						type: 'input',
						prop: 'schemeName',
						placeholder: '请输入方案名称',
					},
					{
						label: '额度编号:',
						type: 'input',
						prop: 'calcSchemeCode',
					},
					{
						label: '选择车型:',
						type: 'select_dialog',
						placeholder: '请选择车型',
						prop: 'productPlanCarModels',
						propLabel: 'productPlanCarModels',
						selectDialogParams: {
							type: 'car',
							title: '请选择车型',
						},
						selectDialogValidate: row => {
							return true;
						},
						cb: (res, row) => {
							// this.queryParams.carModelId = res.id; //车型id
							this.$set(
								this.queryParams,
								'productPlanCarModels',
								res.modelName,
							);
						},
					},
				];
			},

			getList() {
				this.loading = true;
				let params = this._.cloneDeep(this.queryParams);
				params.quotaType = '1';
				// params.businessType= params.businessType?.join(",");
				apis.List(params)
					.then(res => {
						if (res.code == 200) {
							this.datalist = res.rows ?? [];
							this.total = res.total ?? 0;
						}
					})
					.finally(() => {
						this.loading = false;
					});
			},
			changeToApply(row) {
				this.$confirm(`此操作将跳转额度申请页面, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					this._toPage({
						path: '/quota/ApplyEdit',
						name: 'ApplyEdit',
						query: {
							from: 'forecast',
							calcSchemeId: row.calcSchemeId,
						},
					});
				});
			},
			getRowClass({ row }) {
				if (
					row.calcSchemeDetailList?.length === 0 ||
					row.calcSchemeDetailList === undefined
				) {
					// 即该行没有子元素时，添加row-expand-cover类
					return 'row-expand-cover';
				}
			},
			reset() {
				this.$refs.search.form_resetFields?.();
				this.queryParams = { pageNum: 1, pageSize: 10 };
				this.getList();
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			remove(row) {
				this.$confirm(`此操作将删除此方案, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					this.loading = true;
					apis?.Remove(row.calcSchemeId)
						.then(res => {
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '删除成功!',
								});
								this.getList();
							}
						})
						.finally(() => {
							this.loading = false;
						});
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.pagination {
		display: flex;
		justify-content: flex-end;
	}
	.handleBox {
		display: flex;
		justify-content: center;
		gap: 0 5px;
		::v-deep .el-button + .el-button {
			margin-left: 0;
		}
	}
	::v-deep .cell:empty::before {
		content: '-';
	}
</style>
